<template>
  <view>
    <u-divider text="猜你喜欢" :hairline="true"></u-divider>
  </view>
  <view class="productbox">
    <view
      class="product brr4"
      v-for="(item, index) in productlist"
      :key="index"
    >
      <img :src="item.image" alt="" class="img"/>
      <view class="title overflow2 font14">
        {{ item.title }}
      </view>
      <view class="jiage">
        <view class="now font16 fcolorf52121">￥{{ item.Currentprice }}</view>
        <del class="yuan font14 fcolor666">￥{{ item.Originalprice }}</del>
      </view>
      <view class="bottom">
        <view class="left fcolor666 font12 fw600">
          <span class="fcolorf52121">{{ item.people }}</span
          >人付款
        </view>
        <view class="right">
          <img
            src="http://uniqn.zmycode.top/%E8%B4%AD%E7%89%A9%E8%BD%A6%E7%A9%BA.png"
            alt="" class="img"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
const productlist = ref([
  {
    image: "http://uniqn.zmycode.top/%E9%A6%96%E9%A1%B5%E5%85%A8_18.png",
    title: "魅族魅族魅族17 8GB+128GB 十七度灰 骁龙865 旗舰手机",
    //原价
    Originalprice: 3999,
    Currentprice: 3998,
    people: 92,
  },
  {
    image: "http://uniqn.zmycode.top/%E9%A6%96%E9%A1%B5%E5%85%A8_18.png",
    title: "魅族魅族魅族17 8GB+128GB 十七度灰 骁龙865 旗舰手机",
    //原价
    Originalprice: 3999,
    Currentprice: 3998,
    people: 92,
  },
  {
    image: "http://uniqn.zmycode.top/%E9%A6%96%E9%A1%B5%E5%85%A8_18.png",
    title: "魅族魅族魅族17 8GB+128GB 十七度灰 骁龙865 旗舰手机",
    //原价
    Originalprice: 3999,
    Currentprice: 3998,
    people: 92,
  },
  {
    image: "http://uniqn.zmycode.top/%E9%A6%96%E9%A1%B5%E5%85%A8_18.png",
    title: "魅族魅族魅族17 8GB+128GB 十七度灰 骁龙865 旗舰手机",
    //原价
    Originalprice: 3999,
    Currentprice: 3998,
    people: 92,
  },
  {
    image: "http://uniqn.zmycode.top/%E9%A6%96%E9%A1%B5%E5%85%A8_18.png",
    title: "魅族魅族魅族17 8GB+128GB 十七度灰 骁龙865 旗舰手机",
    //原价
    Originalprice: 3999,
    Currentprice: 3998,
    people: 92,
  },
  {
    image: "http://uniqn.zmycode.top/%E9%A6%96%E9%A1%B5%E5%85%A8_18.png",
    title: "魅族魅族魅族17 8GB+128GB 十七度灰 骁龙865 旗舰手机",
    //原价
    Originalprice: 3999,
    Currentprice: 3998,
    people: 92,
  },
  {
    image: "http://uniqn.zmycode.top/%E9%A6%96%E9%A1%B5%E5%85%A8_18.png",
    title: "魅族魅族魅族17 8GB+128GB 十七度灰 骁龙865 旗舰手机",
    //原价
    Originalprice: 3999,
    Currentprice: 3998,
    people: 92,
  },
  {
    image: "http://uniqn.zmycode.top/%E9%A6%96%E9%A1%B5%E5%85%A8_18.png",
    title: "魅族魅族魅族17 8GB+128GB 十七度灰 骁龙865 旗舰手机",
    //原价
    Originalprice: 3999,
    //现价
    Currentprice: 3998,
    people: 92,
  },
]);
</script>

<style lang="scss" scoped>
.productbox {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding: 0 20rpx;

  .product {
    width: calc(50% - 20rpx);
    box-shadow: 2px 2px 4px #c9c9c9;
    overflow: hidden;
    margin: 10rpx;
    background-color: #fff;
    .img {
      width: 100%;
      height: 300rpx;
    }

    .title {
      margin: 10rpx;
      color: #545454;
    }

    .jiage {
      display: flex;
      justify-content: left;
      align-items: center;
      margin: 10rpx 0 10rpx 10rpx;
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10rpx;

      .right {
        .img {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
}
</style>
